import {
  BaseCommand,
  CENTEREVENTS,
  EventsRes,
  KEYBOARD_KEY,
} from '@amcax/base';
import { csEvent } from '@app-base/common/events/EventCenter';
import { useNewMark } from '@app-base/common/hooks/useNewMark';
import { notification } from 'antd';
import { useEffect } from 'react';

const NewMark = ({ onClose }: { onClose: VoidFunction }) => {
  const { execute, exit } = useNewMark(onClose);

  const [api, contextHolder] = notification.useNotification({
    placement: 'top',
    top: 80,
    duration: null,
  });

  const onKeyUp = (e: EventsRes<KeyboardEvent>) => {
    if (e.key === KEYBOARD_KEY.ESC) {
      onClose();
    }
  };

  useEffect(() => {
    execute();

    api.info({
      message: '选择元素以添加标签',
      closable: false,
      duration: null,
    });

    csEvent().on(CENTEREVENTS.KEYUP, onKeyUp);

    return () => {
      csEvent().off(CENTEREVENTS.KEYUP, onKeyUp);
      exit();
    };
  }, []);

  return contextHolder;
};

export const cmdNewMark: BaseCommand = {
  id: 'CmdNewMark',
  label: 'command.mark',
  icon: 'commands/common/mark',
  create: (_, onClose) => <NewMark onClose={onClose} />,
  noHighlight: true,
};
